<script setup>
import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import Barge from "./components/Barge.vue";
import Block1 from "./components/Block1.vue";
import DynamicCompWrapper from "./components/dynamicCompWrapper/index.vue";
import Image from "./components/Image.vue";
import Operate from "./Operate.vue";
import { useSplitPage } from "./useSplitPage";

const { split } = useSplitPage();
const COMPONENT_MAP = {
  block: Block1,
  barge: Barge,
  img: Image,
};

const lorem =
  "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
const data = ref([
  {
    title: "标题1",
    content: [{ a: "123" }, { a: lorem }],
    type: "block",
  },
  {
    title: "标题2",
    content: [
      { a: "子内容1" },
      { a: "子内容1" },
      { a: "子内容2" },
      { a: "子内容3" },
      { a: "子内容4" },
    ],
    type: "barge",
  },
  {
    title: "标题3",
    content: [{ a: "子内容1" }, { a: lorem }, { a: "子内容3" }],
    type: "block",
  },
  {
    type: "img",
    content: ["/src/assets/man.jpg", "/src/assets/man.jpg"],
  },
  {
    title: "标题4",
    content: [{ a: "子内容1" }, { a: "子内容4" }],
    type: "barge",
  },
  {
    title: "标题5",
    content: [
      { a: "子内容1" },
      { a: "子内容2" },
      { a: "子内容3" },
      { a: "子内容4" },
    ],
    type: "block",
  },
]);

const simpleDebounce = (func, delay) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, delay);
  };
};
let resizeObserver = null;
onMounted(async () => {
  // 挂载完成后, 监听窗口变化
  await nextTick();
  const debouncedFunc = simpleDebounce((entries) => {
    console.log("窗口大小变化了, 处理新的分页逻辑", entries);

    split({ rootSelector: ".preview-root", targetHeight: pageState.height });
  }, 300);
  resizeObserver = new ResizeObserver((entries) => {
    debouncedFunc(entries);
  });
  resizeObserver.observe(document.body);

  await nextTick();
  // 页面渲染完成了, 基于pageState 来进行分页
  console.log("pageState", pageState);
});

onBeforeUnmount(() => {
  // 组件卸载前, 停止监听
  resizeObserver.disconnect();
});

const pageState = reactive({
  height: 200,
});
</script>

<template>
  <Operate @update:size="(size) => (pageState.height = size)" />
  <div class="preview-container">
    <div class="comp-container original preview-root">
      <component
        v-for="(item, index) in data.slice(0, 1)"
        :key="index"
        :data="item"
        :id="`block-${index}`"
        :is="COMPONENT_MAP[item.type]"
        class="comp"
        data-sl="1"
      />
    </div>
    <div class="comp-container">
      <DynamicCompWrapper :height="pageState.height"></DynamicCompWrapper>
      <DynamicCompWrapper :height="pageState.height"></DynamicCompWrapper>
    </div>
  </div>
</template>

<style scoped>
.comp {
  flex: 1;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.preview-container {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-direction: row;
}

.comp-container {
  flex: 1;
}
</style>
